<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix" v-if="$route.query.name">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 目录管理 -->
        <!-- 搜索 -->
        <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
          <!-- 左侧 -->
          <el-col :span="20">
            <el-form-item label="目录名称">
              <el-input v-model="form.directoryName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.state" size="small" placeholder="请选择" clearable>
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                <!-- <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearSearch">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
          <!-- 右侧 -->
          <el-col :span="4" align="right">
            <!-- <el-button v-if="$route.query.id" type="text" icon="el-icon-back" @click="backSubject">返回学科</el-button> -->
            <el-button type="success" size="small" @click="backSubject">返回学科</el-button>
            <el-button type="success" size="small" @click="addTag">新增目录</el-button>
          </el-col>
        </el-form>
        <!-- 数据条数 -->
        <el-alert style="margin-bottom: 20px" :title="`数据一共${total}条`" type="info" show-icon :closable="false">
        </el-alert>
        <!-- table列表 -->
        <el-table :data="tableDate">
          <el-table-column type="index" label="序号" width="70" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ formatDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <!-- {{scope.row.state===1?"已启用":"已禁用"}} -->
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="stateTag(scope.row)">
                <span>{{ scope.row.state === 1 ? '禁用' : '启用' }}</span>
              </el-button>
              <el-button type="text" size="medium" :disabled="scope.row.state === 1" @click="updateTag(scope.row)"
                >修改</el-button
              >
              <el-button type="text" size="medium" :disabled="scope.row.state === 1" @click="removeTag(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            :total="total"
            background
            @current-change="changePage"
            @size-change="changeSize"
            :current-page="form.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="form.pagesize"
            layout="prev, pager, next, sizes, jumper"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 新增标签弹层 -->
    <AirectroysAdd ref="TagsAdd" :show-dialog.sync="showDialog" :TagData="TagData" />
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/directorys.js'
import dayjs from 'dayjs'
import AirectroysAdd from '@/module-hmmm/components/directorys-add.vue'

export default {
  components: {
    AirectroysAdd
  },
  data() {
    return {
      list: [],
      // 查询表单中的参数
      form: {
        subjectName: '',
        directoryName: '',
        creatorID: '',
        addDate: '',
        state: null,
        page: 1,
        pagesize: 10
      },
      // 数据总数
      total: 0,
      // 表格内的数据
      tableDate: [],
      showDialog: false,
      TagData: []
    }
  },
  created() {
    this.loadList()
  },
  computed: {
    status() {
      return status
    }
  },
  methods: {
    buildParams() {
      const paramsObj = {}
      const { page, pagesize, subjectName, directoryName, creatorID, addDate, state } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.subjectName = subjectName || null
      paramsObj.directoryName = directoryName || null
      paramsObj.creatorID = creatorID || null
      paramsObj.addDate = addDate || null
      paramsObj.state = state === '' ? null : state
      return paramsObj
    },
    // 获取标签列表数据
    async loadList() {
      // this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()

      try {
        const { data } = await list(paramsObj)
        // console.log(data.items)
        this.tableDate = data.items
        // 获取总条数
        this.total = data.counts

        // this.isLoading = false
      } catch (err) {
        console.log(err)
        // this.isLoading = true
      }
    },
    // 重置搜索表单
    clearSearch() {
      this.$refs.form.resetFields()
      this.form.directoryName = ''
      this.form.state = ''
    },
    // 搜索
    search() {
      this.form.page = 1
      this.loadList()
      // console.log(this.directoryName)
    },

    // 返回学科
    backSubject() {
      this.$router.push({ path: '/list', name: 'subjects-list' })
    },
    // 新增标签
    addTag() {
      this.showDialog = true
      this.TagData = {}
      this.$nextTick(() => {
        this.$refs.TagsAdd.openDialog()
      })
    },
    // 格式化时间
    formatDate(value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 状态改变
    async stateTag(row) {
      // 点击改变状态
      //   console.log(row)
      // 1-启用,点击之后,为0-禁用, 渲染
      const text = row.state === 1 ? '禁用' : '启用'
      const state = row.state === 1 ? 0 : 1
      await changeState({ id: row.id, state: state })
      this.$message.success(`${text}成功!`)
      this.loadList()
    },
    // 修改标签
    updateTag(row) {
      this.TagData = row
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.TagsAdd.openDialog()
      })
    },
    // 删除
    removeTag(id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove({ id })
            this.$message.success('删除成功!')
            this.loadList()
          } catch (e) {
            this.$message.error('删除失败!')
          }
        })
        .catch(() => {})
    },

    // 页码切换
    changePage(currentPage) {
      this.form.page = currentPage
      this.loadList()
    },

    // 每页显示条数切换
    changeSize(currentSize) {
      this.form.page = 1
      this.form.pagesize = currentSize
      this.loadList()
    }
  }
}
</script>

<style scoped></style>
